<template>
  <div class="user-list">
    <cg-table
      :get-list="getList"
      :table-header="columns"
      :delete-data="deleteData"
    >
      <div slot="roleId" slot-scope="text">
        {{ roleName(text) }}
      </div>
    </cg-table>
    <cg-add-edit-modal
      :get-data="getData"
      :create-data="createData"
      :update-data="updateData"
      :add-edit-form-data="addEditFormData"
    />
  </div>
</template>

<script>
import CgTable from '@/components/cgTable/index.jsx';
import CgAddEditModal from '@/components/cgAddEditModal/CgAddEditModal';
import userApi from '@/api/user';
import { columns, addEditFormData } from '@/mock/userList';
import roleApi from '@/api/role';
import { get, forEach } from 'lodash-es';

export default {
  name: 'UserList',
  components: {
    CgTable,
    CgAddEditModal
  },
  data () {
    return {
      getList: userApi.list,
      getData: userApi.getDataById,
      createData: userApi.add,
      updateData: userApi.update,
      deleteData: userApi.delete,
      columns,
      addEditFormData,
      roles: []
    };
  },
  computed: {
    roleName () {
      return function (id) {
        let result = '';
        forEach(this.roles, item => {
          if (item.id === id) {
            result = item.roleName;
          }
        });
        if (result.length) {
          return result;
        }
        return id;
      };
    }
  },
  created () {
    roleApi.allRoles().then(res => {
      console.log(res);
      this.roles = get(res, 'result');
    });
  }
};
</script>

<style scoped>

</style>
